import * as React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
} from 'react-native';
import { ListModel } from './list-model';

interface IListItemProps {
    showSplit?: boolean
    listItem: ListModel
}

class ListItem extends React.Component<IListItemProps>{
    public render() {
        const split = this.props.showSplit ? <View style={styles.split} /> : null
        const { icon, text, arrow } = this.props.listItem || {}
        return (
            <View>
                <View style={styles.container}>
                    <Image resizeMode='contain' style={styles.icon} source={{ uri: icon }}></Image>
                    <Text style={styles.text}>{text}</Text>
                    <Image resizeMode='contain' style={styles.arrow} source={{ uri: arrow }}></Image>
                </View>
                {split}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'flex-start',
        marginTop: 16,
        marginBottom: 16
    },
    text: {
        fontSize: 14,
        color: 'black',
        marginLeft: 20
    },
    icon: {
        width: 20,
        height: 20,
        marginLeft: 15
    },
    arrow: {
        width: 18,
        height: 18,
        position: 'absolute',
        right: 15
    },
    split: {
        height: 0.5,
        backgroundColor: '#E5E5E5',
        marginLeft: 55,
        marginRight: 15
    }
});

export default ListItem